import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
    Form, Button, message, List, Table, Upload, Modal
} from 'antd';
import styles from './Attachment/AttachmentTable.less';
import ImageUploader from './Attachment/ImageUploader';
import ImageDisplayer from './Attachment/ImageDisplayer';
import { solo } from '../../common/solo';
import { wrapFileList } from '../../utils/utils';

const confirm = Modal.confirm;

@connect(({ apply, supplement }) => ({
    apply, supplement
}))
@Form.create()
export default class BusinessImport extends PureComponent {

    state = {
        attachmentMap: {
            videoSign: [],
        },
    }

    handleRemoveImage = (fieldName, fileInfo) => {
        if (this.props.onAttachmentRemove) {
            this.props.onAttachmentRemove(fieldName, fileInfo);
        }
    };

    calcAttachmentData = metaInfo => {
        const { projectId } = this.props;
        return {
            projectId: projectId ? projectId : null,
            customerId: "",
            attachType: 0,
            attachKind: metaInfo.attachKind,
            type: metaInfo.name,
        };
    };

    attachmentColumns = [
        { title: '名称', dataIndex: 'name', key: 'name', width: '20%' },
        {
            title: '附件',
            dataIndex: 'files',
            key: 'files',
            width: '80%',
            // align: 'center',
            render: (text, record, index) => {
                // console.log("index",  index)
                return (
                    <div>
                        {/* {JSON.stringify(record)} */}
                        {/* {this.props.applyDisabled ? (
                            <List
                                key={record.key}
                                size="small"
                                grid={{ gutter: 16, xs: 2, sm: 4, md: 6, lg: 8, xl: 10, xxl: 12 }}
                                dataSource={record.files}
                                renderItem={item => (
                                    <List.Item>
                                        <ImageDisplayer src={item.url} />
                                    </List.Item>
                                )}
                            />
                        ) : ( */}
                        <ImageUploader
                            size="small"
                            maxCount={record.maxCount}
                            fileList={record.files}
                            showRemoveIconType={true}
                            fieldName={record.fieldName}
                            onImageUploaded={this.handleImageUploaded}
                            onRemoveImage={this.handleRemoveImage}
                            attachmentData={this.calcAttachmentData(record)}
                            />
                            {/* )} */}
                    </div>
                );
            },
        },
    ];

    handleAttachmentUploadChange = (info, fieldName) => {
        const fileList = wrapFileList(info);
        const attachmentMap = { ...this.state.attachmentMap };
        attachmentMap[fieldName] = fileList;
        this.setState({
            attachmentMap,
        });
    };

    videoSignData = {
        projectId: this.props.projectId,
        customerId: '',
        attachType: '1',
        attachKind: '9490',
        type: '视频',
    };

    attachVideoData = [{
        key: '1',
        name: '视频附件',
        files: [],
    }];

    attachsVideoColumns = [
        { title: '名称', dataIndex: 'name', key: 'name', width: '20%' },
        {
            title: '附件',
            dataIndex: 'files',
            key: 'files',
            width: '80%',
            // align: 'center',
            render: (text, record, index) => {
                const defaultAttachmentUploadProps = {
                    name: 'file',
                    action: solo.uploadImg,
                    multiple: true,
                    headers: {
                        authorization: 'authorization-text',
                    },
                };

                const videoFaceFileUploadProps = {
                    ...defaultAttachmentUploadProps,
                    defaultFileList: this.state.attachmentMap.videoSign,
                    onChange: info => {
                        this.handleAttachmentUploadChange(info, 'videoSign');
                    },
                    onRemove: file => {
                        this.handleRemoveFile(file);
                    },
                };
                return (
                    <div >
                        <List
                            key={record.key}
                            size="small"
                            span={24}
                            dataSource={record.files}
                            renderItem={(item, index) => (
                                <List.Item >
                                    <a target="_blank" href={`${solo.fileDownload}${item.key}`}>视频下载</a>
                                    <a onClick={() => this.handleVideoDelete(record, index)} style={{ marginLeft: '20px' }}>删除</a>
                                </List.Item>
                            )}
                        />
                        <Upload {...videoFaceFileUploadProps} data={this.videoSignData}>
                            <Button icon="upload">上传视频</Button>
                            <div style={{ lineHeight: '40px', color: '#999999' }} />
                        </Upload>
                    </div>
                );
            },
        },
    ];

    handleRemoveFile = fileInfo => {
        const { dispatch } = this.props;
        let key = null;
        if (fileInfo.response) {
            key = fileInfo.response.body.key;
        } else {
            key = fileInfo.key;
        }
        dispatch({
            type: 'apply/deleteFile',
            payload: {
                fileId: key,
            },
            callback: () => {
                const { apply: { applyResult } } = this.props;
                if (applyResult.code == 200) {
                    message.success('删除成功');
                } else {
                    message.error(applyResult.message);
                }
            },
        });
    };

    handleVideoDelete = (record, index) => {
        Modal.confirm({
            title: `你确定要删除吗？`,
            okText: '确认',
            okType: 'danger',
            cancelText: '取消',
            onOk: () => {
                const { dispatch } = this.props;
                let key = null;
                if (record.files.length > 0) {
                    key = record.files[index].key;
                }
                dispatch({
                    type: 'apply/deleteFile',
                    payload: {
                        fileId: key,
                    },
                    callback: () => {
                        const { apply: { applyResult } } = this.props;
                        if (applyResult.code == 200) {
                            message.success('删除成功');
                            dispatch({
                                type: 'supplement/fetchBusinessDetails',
                                payload: { id: this.props.id },
                            });
                        } else {
                            message.error(applyResult.message);
                        }
                    },
                });
            },
        });
    };

    render() {

        let { attachmentData, attachmentColumns, attachsVideoColumns, attachVideoData } = this;
        const files = this.props.data;
        const onAttachmentVideo = this.props.onAttachmentVideo

        return (<div>
            <Table
                className={styles.attachmentTable}
                size="small"
                rowKey="key"
                pagination={false}
                dataSource={files}
                columns={attachmentColumns}
            />
            <Table
                className={styles.attachmentTable}
                size="small"
                rowKey="key"
                pagination={false}
                dataSource={onAttachmentVideo}
                columns={attachsVideoColumns}
                showHeader={false}
            />
        </div>
        );
    }
}
